<template>
    <div style="position: relative;">
        <div class="wallet-bg">
            <div class="wallet-money">1000</div>
            <div class="wallet-v">我的V币</div>
        </div>
        <div style="position: relative;margin: 20px;top: -40px;">
            <div class="wallet-border">
                <div @click="charge">
                    <img src="../assets/recharge.png"
                         style="width: 36px;height: 36px;float: left;padding-top: 20px;padding-left: 30px;">
                    <span style="padding-left: 10px;">充值</span>
                </div>
            </div>
            <div style="border:  1px solid #eee;margin-top: 20px;background-color: #fff;border-radius: 5px;">
                <div class="wallet-list" @click="income">
                    <div class="wallet-come">收入明细</div>
                </div>
                <div class="wallet-list" @click="expend">
                    <div class="wallet-out">支出明细</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "wallet",
        methods: {
            charge() {
                this.$router.push('recharge')
            },
            income() {
                this.$router.push('income')
            },
            expend() {
                this.$router.push('expend')
            },
            withdraw() {
                this.$router.push('withdraw')
            }
        }
    }
</script>

<style scoped>
    .wallet-money {
        text-align: center;
        font-size: 30px;
        color: #fff;
        padding-top: 40px;
    }

    .wallet-v {
        text-align: center;
        color: #fff;
        font-size: 13px;
    }

    .wallet-bg {
        width: 100%;
        height: 160px;
        background: linear-gradient(#FA74AE, #FAA0DC);
    }

    .wallet-border {
        border: 1px solid #eee;
        height: 80px;
        line-height: 80px;
        border-radius: 5px;
        background-color: #fff;
    }

    .wallet-list {
        border: none;
        border-bottom: 1px solid #eee;
        height: 60px;
        line-height: 60px;
    }

    .wallet-come {
        background: url("../assets/income.png") no-repeat left center;
        background-size: 26px;
        margin-left: 20px;
        padding-left: 36px;
        text-align: left;
    }

    .wallet-out {
        background: url("../assets/out.png") no-repeat left center;
        background-size: 26px;
        margin-left: 20px;
        padding-left: 36px;
        text-align: left;
    }
</style>